<template>
  <div class="home">
    <div class="box">
        <div style="width:100vw; height:.88rem; line-height:.3rem;text-align:center;position:fixed;">
                <img class="st" src="../assets/sousuo.png" alt="">
                <input class="sousuo" type="text" :placeholder=$route.query.key name="" id="">
                <span class="qx">取消</span> 
        </div>
        <div class="tags">
            <div class="tag" ref="scroll">
                    <span :class="title?'tt':'tts'" @click="qb">全部</span>
                    <span ref="tt"  @click="fl(x.kindTitle,i,x.kindId)" :class="x.kindTitle==title?'tts':'tt'" v-for="x,i in tag" :key="i">
                        {{ x.kindTitle }}  
                    </span>
            </div>
        </div>
        <div class="zhong">
            <p class="mub">{{ mbs }}个模板
                <span class="ph">
                    <span class="zr">最热</span> |
                    <span class="zx">最新</span>
                </span>
            </p>
        </div>
        <div class="btu" v-masonry >
            <img v-masonry-tile  v-for="x,i in imgs" :key="i"  class="tu" :src="x.designTemplateThumbUrls[0]" lazy-load>
        </div>
        <infinite-loading direction="bottom" @infinite="infiniteHandler"></infinite-loading>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            tag:[],
            title:0,
            imgs:[],
            page:1,
            id:0,
            mbs:''
        }
    },
    created(){
        this.fb()

    },
    methods:{
        infiniteHandler($state) {
            if(this.id!==0){
                this.$http.post(`/api/template/wxSmallAppSearch.do?_dataType=jsonclient_type=40&pageNo=${this.page}&pageSize=20&kw=${this.$route.query.key}&second_kind_id=${this.id}&time_order=0&use_times_order=0&collection_times_order=0&business_type=1%2C2%2C3&_dataClientType=3`).then((res) => {
                this.page+=1
                this.imgs=this.imgs.concat(res.data.body.templates)
                this.mbs=res.data.body.totalCount
                $state.loaded();
            });
            }else{
                this.$http.post(`/api/template/wxSmallAppSearch.do?_dataType=jsonclient_type=40&pageNo=${this.page}&pageSize=20&kw=${this.$route.query.key}&second_kind_id=0&time_order=0&use_times_order=0&collection_times_order=0&business_type=1%2C2%2C3&_dataClientType=3`).then((res) => {
                this.page+=1
                this.imgs=this.imgs.concat(res.data.body.templates)
                this.mbs=res.data.body.totalCount
                $state.loaded();
            });
            }
            
        },
        fb(){
            this.$http.post(`/api/designkind/getDesignKindBasicInfo.do?_dataType=jsonclient_type=40&type=2&_dataClientType=3`).then((res) => {
                this.tag=res.data.body.data.secondLabel
                console.log(this.tag);
            });
            this.$http.post(`/api/template/wxSmallAppSearch.do?_dataType=jsonclient_type=40&pageNo=1&pageSize=20&kw=${this.$route.query.key}&second_kind_id=${this.id}&time_order=0&use_times_order=0&collection_times_order=0&business_type=1%2C2%2C3&_dataClientType=3`).then((res) => {
                this.imgs=res.data.body.templates
                this.mbs=res.data.body.totalCount
            });   
        },
        fl(x,i,id){
            this.id=id
            this.title=x
            this.$refs.scroll.scrollLeft
            let lt=this.$refs.tt[i].offsetLeft-104
            this.$refs.scroll.scrollLeft=lt
            this.$http.post(`/api/template/wxSmallAppSearch.do?_dataType=jsonclient_type=40&pageNo=1&pageSize=20&kw=${this.$route.query.key}&second_kind_id=${this.id}&time_order=0&use_times_order=0&collection_times_order=0&business_type=1%2C2%2C3&_dataClientType=3`).then((res) => {
                this.imgs=res.data.body.templates
                this.mbs=res.data.body.totalCount
            });
        },
        qb(){
            this.id=0
            this.title=0
            this.fb()
        }
    }
}
</script>

<style scoped>
    .sousuo{
        width: 6.28rem;
        height: .6802rem;
        margin: 0 .24rem;
        border-radius: .6802rem;
        border: none;
        background-color: #f8f8fb;
        text-align: left;
        box-sizing: border-box;
        padding-left: .76rem;
        font-size: 0.2rem;
    }
    .st{
        position: absolute;
        width: .32rem;
        top: .3rem;
        left:.52rem;
    }
    .qx{
        font-size: .25rem;
        margin-right: .2rem;
    }
    .tags{
        width: 100vw;
        position: relative;
        top: .83rem;
    }
    .tag{
        height: .82rem;
        box-sizing: border-box;
        font-size: .3rem;
        white-space: nowrap;
        padding:0 .8rem 0 .28rem;
        position: relative;
        overflow-x: scroll;
        overflow-y: hidden;
        border-bottom: 1px solid #f0f0f0;
    }
    .tag::-webkit-scrollbar {
        display: none;
    }
    .tts,.tt{
        line-height: .82rem;
        position: relative;
        height: .82rem;
        display: inline-block;
        margin-right: .4rem;
    }
    .tts{
        font-weight: bold;
    }
    .tts::before{
        content: '';
        background-color: #0773fc;;
        height: .07rem;
        width: .35rem;
        bottom: -.02rem;
        left: 50%;
        right: 50%;
        transform:translate(-50%,-50%);
        position: absolute;
        border-radius: .2rem;
    }
    .zhong{
        margin-top: 1.2rem;
        padding: 0 .2rem;
        margin-bottom: .3rem;
    }
    .mub{
        font-size: .32rem;
        position: relative;
    }
    .ph{
        display: inline-block;
        font-size: .24rem;
        position: absolute;
        right: -.04rem;
        line-height: .4rem;
    }
    .zr,.zx{
        margin-left: .1rem;
        margin-right: .1rem;
    }
    .btu{
        padding: 0 .2rem;
    }
    .tu{

        width: 3.4rem;
        margin-left: .075rem;
        margin-right: .075rem;
        border-radius: .12rem;
        margin-bottom: .075rem;
    }
</style>